<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>电商拖拽Demo</title>

		<!-- Bootstrap -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
		<!--    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->

	</head>
	<body>

		<h1 style="margin-top: 20px;text-align: center;">电商拖拽项目</h1>

		<div style="width: 100%;">
			<ul class="nav nav-tabs" role="tablist" style="margin-left: 20px;margin-top: 20px;">
				<li role="presentation" data-id="tabContent1" class="active"><a>移动端</a></li>
				<li role="presentation" data-id="tabContent2"><a>PC端</a></li>
				<li role="presentation" data-id="tabContent3"><a>流程图</a></li>
				<li role="presentation" data-id="tabContent4"><a>时序图</a></li>
				<li role="presentation" data-id="tabContent5"><a>类图</a></li>
			</ul>
		</div>

		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="tabContent1"></div>
			<div role="tabpanel" class="tab-pane" id="tabContent2"></div>
			<div role="tabpanel" class="tab-pane" id="tabContent3"></div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

		<!--后面还是加载自己的js-->
		<script src="js/jq/jquery-ui.js"></script>
		<script src="js/jq/jquery.htmlClean.js"></script>
		<script src="js/flowchart/gojs.js"></script>

		<script>
			//提前加载第一页
			$(document).ready(function() {
				$("#tabContent1").load('page/phone.html');
				$("#tabContent2").load('page/pcweb.html');

				/**
				 * tab切换
				 */
				let _id = "tabContent1";
				$(".nav li").click(function() {
					$(this).addClass('active').siblings().removeClass('active');
					_id = $(this).attr('data-id');
					// console.log(_id);
					$(".tab-pane").removeClass('active');
					switch (_id) {
						case "tabContent1":
							$("#tabContent1").addClass('active');
							break;
						case "tabContent2":
							$("#tabContent2").addClass('active');
							break;
						case "tabContent3":
							$("#tabContent3").load('page/flowchart.html');
							$("#tabContent3").addClass('active');
							break;
						case "tabContent4":
							$("#tabContent3").load('page/sequenceDiagram.html');
							$("#tabContent3").addClass('active');
							break;
						case "tabContent5":
							$("#tabContent3").load('page/classPic.html');
							$("#tabContent3").addClass('active');
							break;
					}
				});

			});
		</script>

	</body>
</html>
